<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品分类</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片区域 -->
		<el-card>
			<!-- 添加分类区域 -->
			<el-row>
				<el-col>
					<el-button type="primary" @click="addCart">添加分类</el-button>
				</el-col>
			</el-row>
			<!-- 分类列表区域 -->
			<!-- 此种分类列表需要用第三方插件,在ui页面查找vue-table-with-tree-grid依赖 -->
			<tree-table class="mgtop" :data="catelist" :columns="columns" border show-index index-text="#" :selection-type="false" 	    :show-row-hover="false" :expand-type="false">
				<!-- 是否有效模板 -->
				<template slot="isOk" slot-scope="scope">
					<i class="el-icon-circle-check" v-if="scope.row.cat_deleted !== true" style="color: lightgreen"></i>
					<i class="el-icon-circle-close" style="color: red" v-else></i>
				</template>
				<!-- 排序模板 -->
				<template slot="order" slot-scope="scope">
					<el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
					<el-tag type="success" size="mini" v-else-if="scope.row.cat_level === 1">二级</el-tag>
					<el-tag type="warning" size="mini" v-else>三级</el-tag>
				</template>
				<!-- 操作模板 -->
				<template slot="opt" slot-scope="scope">
					<el-button type="primary" size="mini" icon="el-icon-edit" @click="showEdit(scope.row.cat_id)">编辑</el-button>
					<el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteCate(scope.row.cat_id)">删除</el-button>
				</template>
			</tree-table>
			<!-- 分页区域 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    	</el-pagination>
		</el-card>

		<!-- 添加分类对话框 -->
		<el-dialog title="添加分类" :visible.sync="addCartDialogVisible" width="50%" @close="addCartDialogClose">
			<el-form :model="addCateForm" :rules="addCateFomrRules" ref="addCateFormRef" label-width="100px" class="demo-ruleForm">
				<el-form-item label="活动名称" prop="cat_name">
					<el-input v-model="addCateForm.cat_name"></el-input>
				</el-form-item>
				<el-form-item label="父级分类">
					<!-- option为数据源 -->
					<!-- props为联动的配置对象 -->
					 <el-cascader style="width:100%" expand-trigger="hover" v-model="selectedKeys" :options="parentCartList" :props="cascaderProps" clearable @change="parentCartChanged">
			 		</el-cascader>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addCartDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addCate">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 编辑修改对话框 -->
		<el-dialog title="修改分类"	:visible.sync="editDialogVisible"	width="50%" @close="editDialogClose">
			<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
				<el-form-item label="分类id">
					<el-input v-model="editForm.cat_id" disabled></el-input>
				</el-form-item>
				<el-form-item label="分类名称" prop="cat_name">
					<el-input v-model="editForm.cat_name"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editFormInfo">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data(){
		return {
			// 获取列表数据所需参数
			queryInfo:{
				type:3,
				pagenum:1,
				pagesize:5
			},
			// 分类列表数据
			catelist:[],
			// 分类数据总条数
			total:0,
			// 表格各列的配置
			columns:[
				{
					label:'分类名称',
					prop:'cat_name'
				},{
					label:'是否有效',
					// 表示将当前列定义为模板列
					type:'template',
					// 表示当前这一列使用的模板名称
					template:'isOk'
				},{
					label:'排序',
					type:'template',
					template:'order'
				},{
					label:'操作',
					type:'template',
					template:'opt'
				}
			],
			// 控制添加分类对话框显示和隐藏
			addCartDialogVisible:false,
			// 存储添加分类表单
			addCateForm:{
				cat_name:'',
				cat_pid:0,
				cat_level:0
			},
			// 添加分类名称规则
			addCateFomrRules:{
				cat_name:[
					{required: true,message: '请输入分类名称',trigger: 'blur'}
				],
			},
			// 父级分类的列表
			parentCartList:[],
			//props的配置对象
			cascaderProps:{
				// expandTrigger:'hover',
				label:'cat_name',
				children:'children',
				value:'cat_id',
				// 此为切断父子关联，不然只能选最后一个
				checkStrictly	:true
			},
			// 选中节点的id数组
			selectedKeys:[],
			// 控制编辑对话框显示和隐藏
			editDialogVisible:false,
			// 接收点击编辑查询的分类信息
			editForm:{},
			// 编辑分类时分类名称规则
			editFormRules:{
				cat_name:[
					{required: true,message: '请输入分类名称',trigger: 'blur'}
				]
			}
			
		}
	},
	created(){
		this.getCartList()
	},
	methods:{
		// 获取分类列表数据
		async getCartList(){
			const {data: res} = await this.$http.get('categories',{
				params: this.queryInfo
			})
			// console.log(res);
			if(res.meta.status !== 200){
				return this.$message.error('获取分类列表数据失败')
			}
			this.catelist = res.data.result
			this.total = res.data.total
			// console.log(this.catelist);

		},
		// 监听pagesize改变
		handleSizeChange(newSize){
			this.queryInfo.pagesize = newSize
			this.getCartList()
		},
		// 监听pagenum的改变
		handleCurrentChange(newNum){
			this.queryInfo.pagenum = newNum
			this.getCartList()
		},
		// 监听点击新增分类事件
		async addCart(){
			// 获取分类列表
			const {data: res} = await this.$http.get('categories',{
				params:{type:2}
				})
			if(res.meta.status !== 200){
				return this.$message.error('分类级别获取失败')
			}
			// console.log(res);
			this.parentCartList = res.data
			console.log(this.parentCartList);
			this.addCartDialogVisible = true
		},
		// 父级分类选择性发生变化触发事件
		parentCartChanged(){
			// this.selectedKeys = selected
			// id:选中节点的id数组如果有值，表示有父级，最后元素赋值为相应父级id，反正如果没有，则本身是一级，则id为0
			//等级： 如果选中节点没有元素，则表示一级，为0，若有1个元素，表示2级，为1，若有2个元素，表示三级，为2

			if(this.selectedKeys.length > 0){
				// id
				 this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length -1]
				// 等级
				this.addCateForm.cat_level = this.selectedKeys.length
			}
		},
		// 点击确定，提交添加分类
		addCate(){
			this.$refs.addCateFormRef.validate(async valid => {
				if(!valid) {
					return
				}
				// 预校验成功发送后台新增分类
				const {data: res} = await this.$http.post('categories',this.addCateForm)
				if(res.meta.status !== 201){
 					return this.$message.error('添加分类失败')
				}
				this.addCartDialogVisible = false
				this.$message.success('添加分类成功')
				this.getCartList()
			})
		},
		// 监听关闭新增分类对话框事件
		addCartDialogClose(){
			// 只能重置input的内容
			setTimeout(() => {
				this.$refs.addCateFormRef.resetFields()
			},500)
			// 清除selectedKeys ,双向清除了级联选择显示内容
			this.selectedKeys = []
			// 关闭时把父级的id和该项id赋值回默认一级
			this.addCateForm.cat_pid = 0
			this.addCateForm.cat_level = 0
		},
		// 点击删除，删除分类
		async deleteCate(id){
										console.log(id);

			const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
			// console.log(confirmResult);
			if(confirmResult !== 'confirm'){
				return this.$message('已取消删除')
			}
			const {data: res} = await this.$http.delete('categories/' + id)
			if(res.meta.status !== 200){
				return this.$message.error('分类删除失败')
			}
			this.$message.success('分类删除成功')
			this.getCartList()
		},
		// 监听点击编辑事件
		async showEdit(id){
			this.editDialogVisible = true
			// 获取分类信息
			const {data: res} = await this.$http.get('categories/' + id)
			if(res.meta.status !== 200){
				return this.$message.error('分类信息获取失败')
			}
			this.editForm = res.data
			console.log(res);
		},
		// 监听关闭编辑对话框事件
		editDialogClose(){
			this.$refs.editFormRef.resetFields()
		},
		// 监听点击确定，修改分类
		editFormInfo(){
			this.$refs.editFormRef.validate(async valid => {
				if(!valid) return
				// 预校验成功发送请求
				const {data: res} = await this.$http.put('categories/' + this.editForm.cat_id,{
					cat_name:this.editForm.cat_name
				})
				if(res.meta.status !== 200){
					return this.$message.error('修改分类信息失败')
				}

				this.editDialogVisible = false
				this.$message.success('分类信息修改成功')
				this.getCartList()
			})
		}
	}
}
</script>

<style lang="less" scoped>
	.mgtop{
		margin-top: 15px;
	}
	// 此处为通过深度样式来修改组件内的属性，放置表头边框错位(此处代码移至全局)
	// .mgtop /deep/ .zk-table__body-wrapper{
	// 	overflow: hidden;
	// }
</style>